<template>
	<view class="user-distribution-team" :style="{background:pageColor}">

		<fixed>
			<view class="nav-list flex-center" :style="{background:pageColor}">
				<view class="flex-center flex-1" @tap="showPicker('Commission')">
					<text class="c-title pr-sm">{{commissionIndex == -1 ? (activeIndex==0?'累计佣金':'消费金额') : commissionList[commissionIndex].label}}</text>
					<i class="iconfont icon-down c-paragraph" style="font-size: 12px;"></i>
				</view>
				<view class="flex-center flex-1" @tap="showPicker('DateType')">
					<text class="c-title pr-sm">{{dateTypeIndex == -1 ? '加入时间' : dateTypeList[dateTypeIndex].label}}</text>
					<i class="iconfont icon-down c-paragraph" style="font-size: 12px;"></i>
				</view>
			</view>
		</fixed>


		<view class="list-item fill-base mb-md ml-md mr-md pd-lg radius-16"
			v-for="(item,index) in list.data" :key="index">
			<view class="flex-center">
				<image mode="aspectFill" class="avatar radius" :src="item.avatarUrl"></image>
				<view class="flex-1 ml-md">
					<block v-if="activeIndex==0">
						<view class="flex-between">
							<view class="f-title c-black text-bold max-400 ellipsis"> {{item.user_name}} </view>
							<view class="rel flex-center level-box" v-if="configInfo.plugAuth.payreseller">
								<text class="rel f-icontext" :style="{color: primaryColor}">{{item.reseller_level==1?'一级':'二级'}}</text>
								<view class="abs level-bg" :style="{background: primaryColor}"></view>
							</view>
						</view>
						<view class="flex-between mt-sm" v-if="configInfo.plugAuth.payreseller">
							<view class="flex-y-center f-desc c-paragraph">
								<view class="f-caption text-bold c-title">推荐费：</view>
								<view class="f-caption text-bold c-title">
									¥{{item.cash || 0}}
								</view>
							</view>
						</view>
						<view class="flex-y-center f-desc mt-sm" style="color: #777;">
							<view class="f-caption">加入时间：</view>
							<view class="c-title f-caption">
								{{item.sh_time}}
							</view>
						</view>
					</block>
					<block v-if="activeIndex==1">
						<view class="flex-between">
							<view class="f-title c-black text-bold max-400 ellipsis"> {{item.nickName}} </view>
							<view class="f-caption c-title">{{ item | handleUserArea}}</view>
						</view>
						<view class="flex-between mt-sm">
							<view class="flex-y-center f-desc c-paragraph">
								<view class="f-caption text-bold c-title">消费金额：</view>
								<view class="f-caption text-bold c-title">
									¥{{item.pay_price}}
								</view>
							</view>
						</view>
						<view class="flex-y-center f-desc mt-sm" style="color: #777;">
							<view class="f-caption">加入时间：</view>
							<view class="c-title f-caption">
								{{item.create_time}}
							</view>
						</view>
					</block>
				</view>
			</view>
			<view class="b-1px-t mt-lg pt-lg flex-between" v-if="activeIndex==0">
				<view class="flex-column flex-center">
					<view class="f-caption c-caption">累计下级</view>
					<view class="f-sm-title text-bold pt-md">{{item.total_sub_count}}</view>
				</view>
				<view class="flex-column flex-center">
					<view class="f-caption c-caption">累计用户</view>
					<view class="f-sm-title text-bold pt-md">{{item.total_user_count}}</view>
				</view>
				<view class="flex-column flex-center">
					<view class="f-caption c-caption">累计单量</view>
					<view class="f-sm-title text-bold pt-md">{{item.total_order_count}}</view>
				</view>
				<view class="flex-column flex-center">
					<view class="f-caption c-caption">累计佣金</view>
					<view class="f-sm-title text-bold pt-md">{{item.order_comm_cash}}</view>
				</view>
			</view>
		</view>
		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading">
		</load-more>
		<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1" :isCenter="true" type="USER"></abnor>
		<view class="space-footer"></view>
		
		<w-picker mode="selector" :options="commissionList" :themeColor="primaryColor" @confirm="pickerChange($event, 'commission')"
			:visible.sync="showCommission" confirmText="确认">
			<view class="text-bold f-mini-title">选择{{activeIndex==0?'累计佣金':'消费金额'}}</view>
		</w-picker>
		<w-picker mode="selector" :options="dateTypeList" :themeColor="primaryColor" @confirm="pickerChange($event, 'dateType')"
			:visible.sync="showDateType" confirmText="确认">
			<view class="text-bold f-mini-title">选择加入时间</view>
		</w-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				commissionIndex: -1,
				commissionList: [{label: '由高到低',value: 1, index: 0},{label: '由低到高',value: 2, index: 1}],
				dateTypeIndex: -1,
				dateTypeList: [{label: '加入时间正序',value: 3, index: 0},{label: '加入时间倒序',value: 4, index: 1}],
				activeIndex: 0,
				param: {
					page: 1,
					order: 0
				},
				list: {
					data: []
				},
				loading: true,
				lockTap: false,
				showDateType: false,
				showCommission: false
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		onLoad(options) {
			this.options = options
			this.activeIndex = options.tab || 0
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.param.page = this.param.page + 1;
			this.loading = true;
			this.getList();
		},
		methods: {
			...mapMutations(['']),
			async initIndex(refresh = false) {
				await this.getList()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				uni.setNavigationBarTitle({
					title: this.options.tab == 1 ? '我的用户' : '我的伙伴'
				})
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
			initRefresh() {
				this.param.page = 1;
				this.commissionIndex = -1
				this.dateTypeIndex = -1
				this.param.order = 0
				this.initIndex(true)
			},
			showPicker(type){
				this[`show${type}`] = true
			},
			pickerChange(e, type){
				console.log(e, type, '==> pickerChange')
				let {
					value = 0,
					obj: {
						index
					}
				} = e
				this.commissionIndex = -1
				this.dateTypeIndex = -1
				this[`${type}Index`] = index
				this.param.order = value
				this.list.data = []
				this.param.page = 1;
				this.getList(); 
			},
			async getList() {
				let {
					list: oldList,
					param,
					activeIndex
				} = this
				let methodModel = activeIndex == 1 ? 'myTeam': 'subReseller'
				let newList = await this.$api.mine[methodModel](param)
				if (this.param.page == 1) {
					this.list = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList
				}
				this.loading = false
				this.$util.hideAll()
			}
		},
		filters: {
			handleUserArea(item) {
				let {
					province,
					city,
					area
				} = item
				let text = ``
				// if(province) {
				// 	text = province
				// }
				if(city){
					text += `${city}`
				}
				if(city && area){
					text += `-${area}`
				}
				return text
			}
		}
	}
</script>


<style lang="scss">
	.user-distribution-team {
		
		.nav-list{
			height: 88rpx;
		}

		.list-item {
			.avatar {
				width: 124rpx;
				height: 124rpx;
			}
			.level-box{
				width: 60rpx;
				height: 30rpx;
				.level-bg{
					width: 60rpx;
					height: 30rpx;
					opacity: 0.1;
					border-radius: 5rpx;
				}
			}
		}
	}
</style>